<template>
    <div class="menu" id="menuBox">
        <div class="inner-wrap">
            <img src="@/assets/home/menu-sanjiao.png" @click="exspanHandler" />
            <div class="line-click" @click="exspanHandler"></div>
        <ul>
            <li v-for="(item, index) in state.menu" @click="jumpUrl(item.to)">
                <img :src="item.img" />
                <span :class="item.color">{{ item.text }}</span>
            </li>
        </ul>
        </div>
    </div>
</template>

<script setup>
import { onMounted, reactive } from "vue"
import _ from 'lodash';
import {Tween, Easing} from 'https://unpkg.com/@tweenjs/tween.js@23.1.3/dist/tween.esm.js'
import menu1 from '@/assets/home/menu-1.png';
import menu2 from '@/assets/home/menu-2.png';
import menu3 from '@/assets/home/menu-3.png';
import menu4 from '@/assets/home/menu-4.png';
import menu5 from '@/assets/home/menu-5.png';
import router from "@/router";

const state = reactive({
    isHover: false,
    status: 'open',
    menu: [
        { to: '/water/index', text: '智慧供水', color: 'color_1', img: menu1 },
        { to: 'http://1.95.13.110:8082/index.html', text: '智慧供电', color: 'color_2', img: menu2 },
        { to: '/drainage/index', text: '定额管理', color: 'color_1', img: menu3 },
        { to: '/green/index', text: '智慧绿化', color: 'color_3', img: menu4 },
        { to: '/repair/index', text: '报修管理', color: 'color_2', img: menu5 },
        // { to: '/savew/index', text: '节水型高校', icon: bgBtn }
    ],
})

const jumpUrl = (path) => {
    if(path.indexOf('http') > -1){
        window.open(path)
    } else {
        router.push({
            path: path,
        })
    }
}

// 展开
const open = () => {
    if(state.isHover || state.status === 'open'){
        return;
    }
    state.status = 'open';
    const box = document.getElementById('menuBox');
    const width = -(box.offsetWidth) + 10;
    const coords = { left: width };
    const tween = new Tween(coords, false)
		.to({ left: 0 }, 800)
		.easing(Easing.Quadratic.InOut)
		.onUpdate(() => {
			box.style.setProperty('transform', `translateX(${coords.left}px)`)
		})
		.start() 

	function animate(time) {
		tween.update(time)
		requestAnimationFrame(animate)
	}
	requestAnimationFrame(animate)
}

// 收起
const putAway = () => {
    if(state.isHover || state.status === 'putAway'){
        return;
    }
    state.status = 'putAway';
    const box = document.getElementById('menuBox');
    const width = -(box.offsetWidth) + 10;
    const coords = { left: 0 };
    const tween = new Tween(coords, false)
		.to({ left: width }, 1000)
		.easing(Easing.Quadratic.InOut)
		.onUpdate(() => {
			box.style.setProperty('transform', `translateX(${coords.left}px)`)
		})
		.start() 

	function animate(time) {
		tween.update(time)
		requestAnimationFrame(animate)
	}
	requestAnimationFrame(animate)
}

// 箭头图标事件
const exspanHandler = () => {
    if(state.status === 'open') {
        putAway();
    } else {
        open();
    }
}

// 页面加载完毕，默认自动收起
onMounted(() =>{
    setTimeout(() => {
        putAway();
    }, 1000)
})


</script>

<style lang="scss" scoped>
.menu {
    position: fixed;
    width: 216px;
    height: 593px;
    top: 50%;
    margin-top: -296.5px;
    left: 10px;
    background: url("@/assets/home/menu-bg.png") no-repeat left top;
    background-size: 100% 100%;
    z-index: 100;
    .inner-wrap {
        width: 100%;
        height: 100%;
        position: relative;
        > img {
            width: 11px;
            height: 27px;
            position: absolute;
            top: 50%;
            margin-top: -13.5px;
            right: 5px;
            cursor: pointer;
        }
        .line-click{
            position: absolute;
            right: 0px;
            top: 0px;
            width: 7px;
            height: 100%;
            z-index: 200;
            cursor: pointer;
        }
    }
    ul{
        width: calc(100% - 7px);
        height: calc(100% - 14px);
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
        margin-top: 7px;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: linear-gradient(90deg, rgba(42, 130, 228, 0) 0%, #143d71 100%);
        li {
            width: 100%;
            height: 25%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            img {
                width: 72px;
                height: 72px;
                margin-right: 19px;
            }
            span {
                width: 52px;
                height: 54px;
                font-size: 20px;
                font-weight: 700;
                letter-spacing: 0px;
                line-height: 26.52px;
                color: rgba(143, 210, 250, 1);
                text-align: left;
                vertical-align: top;
            }
            &:hover {
                background: rgba(30, 125, 176, 0.4);
            }
        }
    }
}

.color_1 {
    color: rgba(143, 210, 250, 1) !important;
}
.color_2 {
    color: rgba(230, 193, 138, 1) !important;
}
.color_3 {
    color: rgba(85, 217, 179, 1) !important;
}
</style>